<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>04-按钮</title>
    <link href="./layui/css/layui.css" rel="stylesheet">
    <script src="./layui/layui.js"></script>
</head>
<body>
    <!-- 
        按钮
            向任意html元素设定 class="layui-btn" ,建立一个基础按钮
            通过追加格式为 layui-btn-{type} 的class来定义其他按钮风格

        尺寸
            大型	class="layui-btn layui-btn-lg"
            默认	class="layui-btn"
            小型	class="layui-btn layui-btn-sm"
            迷你	class="layui-btn layui-btn-xs" (就是最小的按钮)
        
        圆角
            原始	class="layui-btn layui-btn-radius layui-btn-primary"
            默认	class="layui-btn layui-btn-radius"
            百搭	class="layui-btn layui-btn-radius layui-btn-normal"
            暖色	class="layui-btn layui-btn-radius layui-btn-warm"
            警告	class="layui-btn layui-btn-radius layui-btn-danger"
            禁用	class="layui-btn layui-btn-radius layui-btn-disabled"

        图标
            (两种样式写法)
            ① <i class="layui-icon layui-icon-face-smile"></i> 

            ② 
            <i class="layui-icon">&#xe60c;</i>   
            其中的 &#xe60c; 即是图标对应的 unicode 字符



    -->

    <!--  基础按钮 -->
    <p>任意html元素设定按钮</p>
    <button class="layui-btn">一个标准的按钮</button>
    <a href="#" class="layui-btn">一个可以跳转的按钮</a>
    <div class="layui-btn">一个按钮</div>

    <hr style="background-color: red; height:5px;">
    <br/>

    <!--不同主题的按钮  -->
    <p>不同主题的按钮 </p>
    <div class="layui-btn">默认按钮</div>
    <div class="layui-btn layui-btn-primary">原始按钮</div>
    <div class="layui-btn layui-btn-normal">百搭按钮</div>
    <div class="layui-btn layui-btn-warm">暖色按钮</div>
    <div class="layui-btn layui-btn-danger">警告按钮</div>
    <div class="layui-btn layui-btn-disabled">禁用按钮</div>

    
    <hr style="background-color: red; height:5px;">
    <br/><br/>

    <!-- 不同尺寸的按钮! -->
    <p>不同尺寸的按钮!</p>
    <!-- 大按钮 -->
    <button class="layui-btn layui-btn-fluid">最大按钮（最大化适应）</button>
    <br/>
    <br/>
    <button class="layui-btn">默认按钮</button>
    <!-- 小按钮 -->
    <button class="layui-btn layui-btn-sm">小按钮</button>
    <!-- 更小按钮(迷你按钮) -->
    <button class="layui-btn layui-btn-xs">更小按钮</button>


     
    <hr style="background-color: red; height:5px;">
    <br/><br/>

    <!-- 圆角按钮 -->
    <p>圆角按钮</p>
    <div class="layui-container">
        <div class="layui-row">
            <div class="layui-col-md2">
                <div class="layui-btn layui-btn-radius">圆角-默认-按钮</div>
            </div>

            <div class="layui-col-md2">
                <div class="layui-btn layui-btn-radius layui-btn-primary">圆角-原始-按钮</div>
            </div>

            <div class="layui-col-md2">
                <div class="layui-btn layui-btn-normal layui-btn-radius">圆角-百搭-按钮</div>
            </div>

            <div class="layui-col-md2">
                <div class="layui-btn layui-btn-warm layui-btn-radius">圆角-暖色-按钮</div>
            </div>

            <div class="layui-col-md2">
                <div class="layui-btn layui-btn-danger layui-btn-radius">圆角-警告-按钮</div>
            </div>

            <div class="layui-col-md2">
                <div class="layui-btn layui-btn-disabled layui-btn-radius">圆角-禁用-按钮</div>
            </div>
        </div>
    </div>


    <hr style="background-color: red; height:5px;">
    <br/><br/>

    <!-- 图标 -->
    <p>图标/两种写法</p><br>
    <!-- 第一种写法 -->
    <button class="layui-btn layui-btn-primary">
        <i class="layui-icon layui-icon-face-smile"></i>图标
    </button>

    <!-- 第二种写法 -->
    <button class="layui-btn layui-btn-warm">
        <i class="layui-icon">&#xe60c;</i>图标   
    </button>

    <br/><br/>

    <button class="layui-btn layui-btn-primary">
        <i class="layui-icon layui-icon-heart-fill"></i>图标
    </button>

    <button class="layui-btn layui-btn-warm">
        <i class="layui-icon layui-icon-heart"></i>图标
    </button>

    <button class="layui-btn layui-btn-danger">
        <i class="layui-icon layui-icon-at"></i>图标
    </button>

    <hr style="background-color: red; height:5px;">
    <br/><br/>

    



    
    




</body>
</html>